<template>
    <div>
        <el-card class="box-card">
            <div class="header-box">
                <span class="title-name">报废主题名称 :</span>
                <el-input class="handle-input" clearable v-model="valueName" placeholder="请输入内容"></el-input>
            </div>
            <el-button type="primary" icon="el-icon-search" @click="seled">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
            <!-- <el-button type="success" icon="el-icon-upload2">导出</el-button> -->
        </el-card>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" label="序号" width="60" align='center'>
                    <template slot-scope="scope">
                        {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="billName" label="报废主题" align='center'></el-table-column>
                <el-table-column prop="billTime" label="报废时间" align='center'></el-table-column>
                <el-table-column prop="remark" label="备注" align='center'></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr10" @click="detail(scope.row)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <wastedetail ref="detaillist" :visible="visible" @close="visible = false"></wastedetail>
    </div>
</template>

<script>
import { scraplistDetail } from '../../../api/index'
import wastedetail from './components/assetwaste_detail.vue'
export default {

    data() {
        return {
            visible: false,
            valueName: "", //名称
            query: {
                billType: 3,
                pageNum: 1,
                pageSize: 10,
                billName: ""
            },
            pageTotal: 0,

            tableData: [],
        };
    },
    components: {
        wastedetail
    },
    mounted() {
        this.scraplistDetails()
    },
    methods: {
        // 重置
        reset() {
            this.valueName = ''
            this.query.billName = ''
            this.query.pageNum = 1
            this.scraplistDetails()
        },
        //查询
        seled() {
            this.query.billName = this.valueName
            this.query.pageNum = 1
            this.scraplistDetails()
        },
        async scraplistDetails() {
            const data = await scraplistDetail(this.query)
            this.tableData = data.data.data.records
            this.pageTotal = data.data.data.total
        },
        handlePageChange(val) {
            this.query.pageNum = val;
            this.scraplistDetails()

        },
        detail(e) {
            this.$refs.detaillist.open(e)
            this.visible = true
        }
    }
};
</script>

<style scoped>
.header-box {
    display: inline-block;
}

.title-name {
    font-size: 14px;
    margin-right: 10px;
}

.handle-input {
    width: 220px;
    margin-right: 10px;
}

.handle-select {
    width: 220px;
    margin-right: 10px;
}


.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}
</style>
